<template>
  <div v-loading="loading">
    <el-table
      :data="diffList"
      style="width: 100%"
      :height="tableHeight"
      empty-text="查询条件下没有找到记录"
    >
      <el-table-column prop="date" label="日期" width="120" />
      <el-table-column prop="weekday" label="星期" width="120" />
      <el-table-column prop="plan" label="计划" width="220" />
      <el-table-column prop="actual" label="实际" width="220" />
      <el-table-column prop="note" label="备注" width="450" />
    </el-table>
    <div v-loading="loading" class="my_opt_btn_pannel">
      <div style="text-align: left"></div>
      <div style="text-align: right; padding-right: 20px">
        <el-button @click="searchVisable = true">搜索</el-button>
        <el-button @click="doSearch()">刷新</el-button>
      </div>
    </div>
    <el-dialog v-model="searchVisable" title="搜索条件" width="600">
      <el-form :model="search">
        <el-form-item label="班级">
          <el-select style="width: 300px" filterable v-model="search.s_DseClass">
            <el-option
              v-for="item in allDseClass"
              :key="item.Pk"
              :value="item.Pk"
              :label="item.ClassName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="范围">
          <el-date-picker
            style="width: 300px"
            v-model="search.s_dateRange"
            type="daterange"
            range-separator="|"
          />
        </el-form-item>
        <el-form-item>
          <el-button icon="Search" @click="doSearch">搜索</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { DiffSchedule } from '@/api/rpt'
import { computed, onMounted, reactive, ref } from 'vue'
import { useWindowSize } from '@vueuse/core'
import { dateFormat } from '@/utils/stringUtils'
import type { DseClassModel } from '@/type/DseClass'
import { listDseClass } from '@/api/dseclass'
const searchVisable = ref(false)
const winSize = useWindowSize()
const loading = ref(false)
const diffList = ref<any>()
const allDseClass = ref<DseClassModel[]>([])

const tableHeight = computed(() => winSize.height.value - 60 - 8 - 42) //60是MENU,8是PADDING-TOP，42是按钮区
const search = reactive({
  s_dateRange: [new Date(), new Date()],
  s_DseClass: '',
})

onMounted(async () => {
  allDseClass.value = (await listDseClass({ pageSize: 10000 })).Data
  search.s_DseClass = allDseClass.value[0]!.Pk!
  //await doSearch()
})
const doSearch = async () => {
  searchVisable.value = false
  try {
    loading.value = true
    const r = await DiffSchedule(
      dateFormat(search.s_dateRange[0]!),
      dateFormat(search.s_dateRange[1]!),
      search.s_DseClass,
    )
    diffList.value = r.Data
  } finally {
    loading.value = false
  }
}
</script>
